<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>CANVAS Gobang</title>
    <style>
        .can{ position: relative}
        .can div{position: absolute;  top: 50%;  right: 10%;  text-align: center}
        .can div a{ color: #333333;text-decoration: none;}
        #can{
           box-shadow:  0px 0px 50px 0px #ffa21c;display: block;margin: 0 auto;text-align: center;background-color: #fde3a8;cursor: pointer;padding: 5px;}
    </style>
    <script type="text/javascript">
            var num;
            var can;
            var cxt;
            var isWhite = true;
            var isEnd = false;
            num = 15;

            var chessman = new Array(num);
            for(var x = 0;x < num; x++){
                chessman[x] = new Array(num);
                for(var y = 0;y < num;y++){
                    chessman[x][y] = 0;
                }
            }//创建二维数组以存储棋子

            function drawChessboard(){
                can = document.getElementById("can");
                cxt = can.getContext("2d");
                can.width = num*50;
                can.height = num*50;
                for(var i = 0;i<= num*50;i += 50){
                    cxt.beginPath();
                    cxt.moveTo(0,i);
                    cxt.lineTo(num*50,i);
                    cxt.closePath();
                    cxt.stroke();

                    cxt.beginPath();
                    cxt.moveTo(i, 0);
                    cxt.lineTo(i, num*50);
                    cxt.closePath();
                    cxt.stroke();
                }
            }

            function drawBlackChessMan(w,z){//绘制黑棋
                var rGrd =cxt.createRadialGradient(w, z, 0, w, z, 40);
                rGrd.addColorStop(1,'#000');
                rGrd.addColorStop(0.9, '#111');
                rGrd.addColorStop(0.8, '#222');
                rGrd.addColorStop(0.7, '#333');
                rGrd.addColorStop(0.6, '#444');
                rGrd.addColorStop(0.5, '#555');
                rGrd.addColorStop(0.4, '#666');
                rGrd.addColorStop(0.3, '#777');
                rGrd.addColorStop(0.2, '#888');
                rGrd.addColorStop(0.1, '#999');
                rGrd.addColorStop(0, '#AAA');
                cxt.fillStyle = rGrd;
                cxt.beginPath();
                cxt.arc(w, z,25,0,Math.PI*2,false);
                cxt.closePath();
                cxt.fill();
            }
            function drawWhiteChessMan(w,z){//绘制白棋
                var rGrd =cxt.createRadialGradient(w, z, 0, w, z, 40);
                rGrd.addColorStop(1,'#555');
                rGrd.addColorStop(0.9, '#666');
                rGrd.addColorStop(0.8, '#777');
                rGrd.addColorStop(0.7, '#888');
                rGrd.addColorStop(0.6, '#999');
                rGrd.addColorStop(0.5, '#AAA');
                rGrd.addColorStop(0.4, '#BBB');
                rGrd.addColorStop(0.3, '#CCC');
                rGrd.addColorStop(0.2, '#DDD');
                rGrd.addColorStop(0.1, '#EEE');
                rGrd.addColorStop(0, '#FFF');

                cxt.fillStyle = rGrd;
                cxt.beginPath();
                cxt.arc(w, z,25,0,Math.PI*2,false);
                cxt.closePath();
                cxt.fill();
            }
            function play(e){//执行下棋的函数
                var x = parseInt((e.clientX-325)/50);
                var y = parseInt((e.clientY+15)/50);
                if(chessman[x][y] != 0){
                    return;
                }
                if(isWhite){
                    isWhite = false;
                    moveChess(1,x,y);
                }else{
                    isWhite = true;
                    moveChess(2,x,y);
                }
            }
            function moveChess(chess,x,y){
                if (isEnd == true){
                    alert("It's Game over,please reset");
                    return;
                }
                if(x>=0 && x<num && y >= 0 && y<num){
                    if(chess == 1){
                        drawWhiteChessMan(x*50,y*50);
                        chessman[x][y] = 1;
                    }else{
                        drawBlackChessMan(x*50,y*50);
                        chessman[x][y] = 2;
                    }
                    judge(x,y,chess);
                }
            }
            function judge(x, y, chess) {//判断该局棋盘是否赢了
                var countone = 0;
                var counttwo = 0;
                var counttree = 0;
                var countfour = 0;

                //左右
                for (var i = x; i >= 0; i--) {
                    if (chessman[i][y] != chess) {
                        break;
                    }
                    countone++;
                }
                for (var i = x + 1; i < 15; i++) {
                    if (chessman[i][y] != chess) {
                        break;
                    }
                    countone++;
                }
                //上下
                for (var i = y; i >= 0; i--) {
                    if (chessman[x][i] != chess) {
                        break;
                    }
                    counttwo++;
                }
                for (var i = y + 1; i < 15; i++) {
                    if (chessman[x][i] != chess) {
                        break;
                    }
                    counttwo++;
                }
                //左上右下
                for (var i = x, j = y; i >= 0, j >= 0; i--, j--) {
                    if (chessman[i][j] != chess) {
                        break;
                    }
                    counttree++;
                }
                for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) {
                    if (chessman[i][j] != chess) {
                        break;
                    }
                    counttree++;
                }
                //右上左下
                for (var i = x, j = y; i >= 0, j < 15; i--, j++) {
                    if (chessman[i][j] != chess) {
                        break;
                    }
                    countfour++;
                }
                for (var i = x + 1, j = y - 1; i < 15, j >= 0; i++, j--) {
                    if (chessman[i][j] != chess) {
                        break;
                    }
                    countfour++;
                }

                if (countone >= 5 || counttwo >= 5 || counttree >= 5 || countfour >= 5) {
                    if (chess == 1) {
                        alert("恭喜白棋");
                    }
                    else {
                        alert("恭喜黑棋");
                    }
                    isEnd = true;
                }
            }
        window.onload = function(){
            var reset = document.getElementById("reset");
            reset.attachEvent("onclick",re());
            function re(){
                document.URL = location.href;
            }
        }
    </script>
</head>
<body onload="drawChessboard()">
    <div class="can" >
        <canvas id="can" onmousedown="play(event)">
            您的浏览器暂不支持canvas,请查看你的浏览器版本并者更换浏览器重试!
        </canvas>
        <div>
            <a href="" id="reset">reset</a><br>
            <a href="">black pawn First</a><br>
            <a href="">white pawn First</a>
        </div>
    </div>
</body>

</html>